<template>
    <div>
        <el-dialog title="编辑菜单" :visible.sync="editDialog" width="30%" :before-close="handColse">
            <el-form :model="menuInfo" ref="menuInfo"  label-width="80px" class="demo-ruleForm">
                <el-form-item label="菜单名称">
                    <el-input v-model="menuInfo.menuName"></el-input>
                </el-form-item>
                <el-form-item label="归属系统" >
                    <el-select v-model="menuInfo.systemId" clearable placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in options" :key="item.systemId" :label="item.systemName" :value="item.systemId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="归属菜单">
                    <el-select v-model="menuInfo.parentId == 0 ? menuInfo.menuId : menuInfo.parentId" clearable placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in menus" :key="item.menuId" :label="item.menuName" :value="item.menuId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单地址">
                    <el-input v-model="menuInfo.url"></el-input>
                </el-form-item>
                <el-form-item label="权限值">
                    <el-input v-model="menuInfo.menuValue"></el-input>
                </el-form-item>
                <el-form-item label="按钮类型">
                    <el-radio-group v-model="menuInfo.type">
                        <el-radio :label="1">目录</el-radio>
                        <el-radio :label="2">菜单</el-radio>
                        <el-radio :label="3">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="menuInfo.sort"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handColse">取 消</el-button>
                <el-button type="primary" @click="updateSumbit()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
export default{
    data (){
        return{

        }
    },
    props:{
        editDialog:{
            type: Boolean,
            default: false
        },
        menuInfo:{
            type: Object,
            default: {}
        },
        options:{
            type:Array,
            default: []
        },
        menus:{
            type:Array,
            default:[]
        }
    },
    methods:{
        updateSumbit() {
            let data = this.menuInfo;
            let newData = {
                "menuId": data.menuId,
                "parentId": data.parentId,
                "menuName": data.menuName,
                "type": data.type,
                "systemId": data.systemId,
                "url": data.url,
                "menuValue": data.menuValue,
                "sort": data.sort
            }

            this.$refs.menuInfo.validate((valid) => {
                if (valid) {
                    this.$http({
                        method: 'post',
                        url: '/admin/menu/update',
                        Headers: {
                            'Content-Type': 'application/json'
                        },
                        data: newData
                    }).then(res => {
                        let result = res.data;
                        this.insertDialogVisible = false
                        if (result.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            })
                            this.handColse();
                            return
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handColse(){
            console.log(JSON.stringify(this.menuInfo))
            this.$emit("insertDialogFormVisible", false);
        }
    }
}


</script>